<HTML>
<HEAD>
<TITLE>Groovy Color Thing III</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
var tiles;
var intervalID = 0;
var seq;
var seqIndex = 0;
function SetupSequence()
{
seq = new Array(26);
seq[0] = "000000000000000000000000000001000000000000000000000000000001000000000000000000000000000001000000000000000000000000000001000000000000000000000000000001";
seq[1] = "000000000000000000000000000010000000000000000000000000000010000000000000000000000000000011000000000000000000000000000010000000000000000000000000000010";
seq[2] = "000000000000000000000000000100000000000000000000000000000100000000000000000000000000000111000000000000000000000000000100000000000000000000000000000100";
seq[3] = "000000000000000000000000001001000000000000000000000000001001000000000000000000000000001111000000000000000000000000001001000000000000000000000000001001";
seq[4] = "000000000000000000000000010010000000000000000000000000010010000000000000000000000000011110000000000000000000000000010010000000000000000000000000010010";
seq[5] = "000000000000000000000000100101000000000000000000000000100101000000000000000000000000111101000000000000000000000000100101000000000000000000000000100101";
seq[6] = "000000000000000000000001001011000000000000000000000001001010000000000000000000000001111011000000000000000000000001001010000000000000000000000001001011";
seq[7] = "000000000000000000000010010111000000000000000000000010010100000000000000000000000011110111000000000000000000000010010100000000000000000000000010010111";
seq[8] = "000000000000000000000100101111000000000000000000000100101000000000000000000000000111101111000000000000000000000100101000000000000000000000000100101111";
seq[9] = "000000000000000000001001011110000000000000000000001001010000000000000000000000001111011110000000000000000000001001010000000000000000000000001001011110";
seq[10]= "000000000000000000010010111101000000000000000000010010100001000000000000000000011110111101000000000000000000010010100001000000000000000000010010111101";
seq[11]= "000000000000000000100101111010000000000000000000100101000010000000000000000000111101111010000000000000000000100101000010000000000000000000100101111011";
seq[12]= "000000000000000001001011110100000000000000000001001010000100000000000000000001111011110100000000000000000001001010000100000000000000000001001011110111";
seq[13]= "000000000000000010010111101000000000000000000010010100001000000000000000000011110111101000000000000000000010010100001000000000000000000010010111101111";
seq[14]= "000000000000000100101111010000000000000000000100101000010000000000000000000111101111010000000000000000000100101000010000000000000000000100101111011110";
seq[15]= "000000000000001001011110100001000000000000001001010000100001000000000000001111011110100001000000000000001001010000100001000000000000001001011110111101";
seq[16]= "000000000000010010111101000010000000000000010010100001000010000000000000011110111101000010000000000000010010100001000010000000000000010010111101111011";
seq[17]= "000000000000100101111010000100000000000000100101000010000100000000000000111101111010000100000000000000100101000010000100000000000000100101111011110111";
seq[18]= "000000000001001011110100001000000000000001001010000100001000000000000001111011110100001000000000000001001010000100001000000000000001001011110111101111";
seq[19]= "000000000010010111101000010000000000000010010100001000010000000000000011110111101000010000000000000010010100001000010000000000000010010111101111011110";
seq[20]= "000000000100101111010000100000000000000100101000010000100001000000000111101111010000100001000000000100101000010000100001000000000100101111011110111100";
seq[21]= "000000001001011110100001000001000000001001010000100001000010000000001111011110100001000010000000001001010000100001000010000000001001011110111101111001";
seq[22]= "000000010010111101000010000011000000010010100001000010000100000000011110111101000010000100000000010010100001000010000100000000010010111101111011110011";
seq[23]= "000000100101111010000100000110000000100101000010000100001001000000111101111010000100001001000000100101000010000100001001000000100101111011110111100110";
seq[24]= "000001001011110100001000001100000001001010000100001000010010000001111011110100001000010010000001001010000100001000010010000001001011110111101111001100"
seq[25]= "000010010111101000010000011000000010010100001000010000100100000011110111101000010000100100000010010100001000010000100100000010010111101111011110011000";
}
function Animate()
{
var s = seq[seqIndex++];
var j = 1;
if(seqIndex >= seq.length)
seqIndex = 0;
for(var i = 0; i < s.length;i++) {
document.images[j++].src = tiles[s.charAt(i)].src;
}
}
function Setup()
{
tiles = new Array(6);
for(var i = 0; i < 6; i++)
tiles[i] = new Image(16,16);
tiles[0].src = "../GRAFX/ANIM/BLACK.GIF";
tiles[1].src = "../GRAFX/ANIM/YELLOW.GIF";
// tiles[2].src = "../GRAFX/ANIM/RED.GIF";
// tiles[3].src = "../GRAFX/ANIM/YELLOW.GIF";
// tiles[4].src = "../GRAFX/ANIM/GREEN.GIF";
// tiles[5].src = "../GRAFX/ANIM/GRAY.GIF";
SetupSequence();
}
function StartSign()
{
intervalID = setInterval("Animate()",250);
}
function StopSign()
{
if(intervalID) {
clearInterval(intervalID);
intervalID = 0;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Setup()" onUnload="StopSign()">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>Groovy Animated Sign</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
This recipe creates an animated sign, like you see advertising motel rates and gas prices on the interstate. (JavaScript 1.2 only!)<p>
</FONT>
<SCRIPT LANGUAGE="JavaScript1.2">
for(var row=0; row < 5;row++) {
for(var col=0; col<30;col++) {
document.write('<IMG SRC="../GRAFX/ANIM/BLACK.GIF" WIDTH=16 HEIGHT=16 BORDER=0>');
}
document.writeln('<BR>');
}
</SCRIPT>
<FORM><INPUT TYPE="button" VALUE="Start the sign" onClick="StartSign()"> <INPUT TYPE="button" VALUE="Stop the sign" onClick="StopSign()"></FORM>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
This applet works by caching some images and then manipulating the <FONT FACE="Arial,Helvetica" COLOR="#007777">document.images[]</FONT> array.
A recurring timer event triggers each update of the sign. The 150-position layout of each sign update is stored
in an array, and a function walks through it, assigning new <KBD><B>src</B></KBD> property values to the elements
in the image array:
<FONT COLOR="#770000" SIZE=3><PRE>
function Animate()
{
var s = seq[seqIndex++];
var j = 1;
if(seqIndex >= seq.length)
seqIndex = 0;
for(var i = 0; i < s.length;i++) {
document.images[j++].src = tiles[s.charAt(i)].src;
}
}</PRE></FONT>
</FONT>
<BR><BR><h5>Copyright ©1998 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>